<template>
  <div class="">
    <el-select
      v-model="optionVal"
      placeholder="请选择"
      style="width: 240px"
      @change="selectChange"
    >
      <el-option
        class="option"
        :value="item.value"
        v-for="item in props.selectArr"
        :key="item.id"
        :label="item.label"
         @click="onSelect(item)"
        ><span style="float: left">{{
          item.label
        }}</span>
        <span
          v-if="item.value !== '全部'"
          style="float: right"
          @click="clearArr(item)"
        >
          <el-icon><CloseBold /></el-icon> </span
      ></el-option>
      <template #footer>
        <span v-if="!isAdding" text bg size="small" @click="onAddOption">
          新建分组
        </span>
        <template v-else>
          <el-input
            v-model="optionName"
            class="option-input"
            placeholder="请输入新的分支"
            size="small"
            style="margin-bottom: 7px"
          />
          <div>
            <el-button type="primary" size="small" @click="onConfirm">
              确定
            </el-button>
            <el-button size="small" @click="clear">取消</el-button>
          </div>
        </template>
      </template>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const props=defineProps(["modelValue", "selectArr", "showList"]);
const emit = defineEmits(["update:modelValue", "selectChange", "onSelect","clearArr"]);
const optionVal = defineModel('firstName')
const optionName = ref("");
let delData = ref({});
const isAdding = ref(false);

const selectChange=()=>{
    emit("selectChange");
}

const onSelect=(item)=>{
    emit("onSelect",item);
}

const clearArr=(item)=>{
    delData.value = item;
    optionVal.value={id:'',vlaue:"",label:''}
    emit("clearArr",item)
    // emit("update:modelValue",'')
    console.log('delData.value: ', delData.value);
}

const onAddOption = () => {
  isAdding.value = true;
};

const onConfirm = () => {
  if (optionName.value) {
    props.selectArr.push({
      id: optionName.value.length + 1,
      label: optionName.value,
      value: optionName.value,
    });
    clear();
  }
};
const clear = () => {
  optionName.value = "";
  isAdding.value = false;
};
// 传过来的值
</script>
<style scoped lang="scss"></style>
